<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .router-link-active {
            background-color: #f00;
        }

        /*首页自己的类名实现高亮*/
        .active {
            border: 1px solid gold;

        }
    </style>

</head>
<body>
<div id="hashapp">


    <!--router-link 声明式导航，组件定义导航-->
    <router-link to="/home">首页</router-link>
    <router-link to="/news">新闻</router-link>
    <router-link to="/about">关于</router-link>

    <hr>
    <button @click="forward">前进</button>
    <button @click="goBack">后退</button>
    <hr>

    <router-view></router-view>

</div>

</body>

<script src="lib/vue.js"></script>
<!--
vue-router v3.4.9
-->
<script src="lib/vue-router.js"></script>

<script type="text/javascript">
    const Home = {
        template: `
            <div>

            <h2>首页</h2>
            <p>首页的内容展示</p>
            <p>首页的内容展示</p>
            <p>首页的内容展示</p>
</div>
        `
    }


    const News = {
        template: `
            <div>
            <h2>News</h2>
            <p>News 的内容展示</p>
            <ul>
            <li><router-link to="/info/1/yq1">上海5月13日市、区主要医疗机构暂停医疗服务情况</router-link></li>
            <li><router-link to="/info/2/yq2">上海：将尽快恢复全市正常生产生活秩序</router-link></li>
            <li><router-link to="/info/2/yq3">5月12日陕西新增1例本土确诊病例</router-link></li>
            </ul>
</div>
        `
    }

    const Info = {
        created() {
            console.log(this.$route);
        },
        template: `
            <div>
            <h2>Info</h2>
            <p>调试： {{ $route.params }}</p>
            <p>新闻详情内容展示-id: {{ $route.params.nid }}</p>

</div>
        `
    }


    const Detail = {
        created() {
            console.log(this.$route);
            console.log(this.$route.query);
            console.log(this.$route.query.id);
            console.log(this.$route.query.type);
        },
        template: `
            <div>
            <h2>Detail</h2>
            <p>调试： {{ $route.query }}</p>
            <p>新闻详情内容展示-id:{{ $route.query.id }}</p>

</div>
        `
    }


    const About = {
        methods: {
            goHome() {
                // this.$route
                // $router 也是 vue-router 为我们提供的
                // push 参数就是跳转地址
                // 方式1：跳转 直接写路由规则里面的 path
                this.$router.push('/home');

            },
            goToNewsDetailById() {
                /*参数如何传递
                * 1. query
                * 2. pathinfo (params)
                * */
                /*
                this.$router.push({
                    name: 'info',
                    params: {nid: 2, ntype: 'qy3'}
                });
                */
                this.$router.push('/info/2/yq5');

            },
            goToNewsDetailByQueryId() {
                /*query传递参数，要使用 path 属性*/
                /*方式1：*/
                /* this.$router.push({
                     path: '/detail',
                     query: {id: 2, type: 'yq3'},
                 })
                */
                this.$router.push('/detail?id=2&type=yq4');
            }
        },

        template: `
            <div>
            <h2>About</h2>
            <p>About 的内容展示</p>
            <button @click="goHome">点击到首页</button>
            <button @click="goToNewsDetailById">点击跳转到[第二条]新闻</button>
            <button @click="goToNewsDetailByQueryId">点击跳转到[第二条]新闻</button>

</div>
        `
    }

    const routes = [
        {
            path: '/',
            name: 'index',
            /* redicret 单词翻译过来叫做重定向。代表访问 #/的时候，跳转到 /home*/
            /* redicret 路由规则里面的 path */
            redirect: '/home',
        },

        /*路由隐射表里面的每一个对象是一个路由关系*/
        {
            path: '/home', // 路由地址，锚点url地址
            name: 'home', // 给这个路由规则起的名字，非必须
            component: Home,
        },
        {
            path: '/news',
            name: 'news',
            component: News,
        },
        {
            path: '/about',
            name: 'about',
            component: About,
        },

        /*现在使用的pathinfo模式的url地址，则定义路由的时候，要定义成如下的格式：
        * /url/:param1/:param2/.....
        * :type
        * 冒号后面的标识符用户自定义，稍后在对应的路由页面需要通过该标识符获取内容
        * */
        {
            path: '/info/:nid/:ntype',
            name: 'info',
            component: Info
        },
        {
            path: '/detail',
            name: 'detail',
            component: Detail
        }
    ];

    /*使用vue-router得到路由器，底层就会去做hash的监听，页面的切换*/

    const router = new VueRouter({
        routes: routes,
        linkActiveClass: 'active',
    })

    /*
    * 实例化vue
    * */
    new Vue({
        el: "#hashapp",
        data: {},
        //router该属性的值是： new VueRouter 这个的实例对象
        router: router,
        methods: {
            forward() {
                console.log(this.$router, 'forward');
                // bom
                // history.go(-1)

                this.$router.go(1);
            },
            goBack() {
                /*
                * https://router.vuejs.org/zh/
                * */
                console.log(this.$router, 'goBack');
                this.$router.back();
                // this.$router.go(-2);
            }

        }
    });
</script>

</html>
